<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>基本准备工作 | vue-admin-doc</title>
    <meta name="description" content="vue element admin">
    <link rel="icon" href="/vue-admin/doc/logo.png">
    
    <link rel="preload" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css" as="style"><link rel="preload" href="/vue-admin/doc/assets/js/app.d64942cb.js" as="script"><link rel="preload" href="/vue-admin/doc/assets/js/6.1efa8625.js" as="script"><link rel="prefetch" href="/vue-admin/doc/assets/js/2.abdc0c9d.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/3.1009c37b.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/4.7d50b7a1.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/5.e95473fb.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/7.4fef4205.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/8.601e5cd3.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/9.2982823f.js">
    <link rel="stylesheet" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-admin/doc/" class="home-link router-link-active"><!----> <span class="site-name">vue-admin-doc</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-admin/doc/guide/" class="sidebar-link">介绍</a></li><li><a href="/vue-admin/doc/guide/base.html" class="active sidebar-link">一、基本准备</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#_1-创建项目" class="sidebar-link">1.创建项目</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#_2-基本配置及目录创建" class="sidebar-link">2.基本配置及目录创建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#es-lint" class="sidebar-link">es-lint</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#vue-config-js" class="sidebar-link">vue.config.js</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#目录创建" class="sidebar-link">目录创建</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#_3-基础工具、资源添加" class="sidebar-link">3.基础工具、资源添加</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#public" class="sidebar-link">public</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#api" class="sidebar-link">api</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#assets" class="sidebar-link">assets</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#common" class="sidebar-link">common</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#directive" class="sidebar-link">directive</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#components" class="sidebar-link">components</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#plugin" class="sidebar-link">plugin</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/base.html#_4-准备完成" class="sidebar-link">4.准备完成</a></li></ul></li><li><a href="/vue-admin/doc/guide/start.html" class="sidebar-link">二、开始实现</a></li><li><a href="/vue-admin/doc/guide/component.html" class="sidebar-link">三、组件解析</a></li><li><a href="/vue-admin/doc/guide/third.html" class="sidebar-link">四、第三方库</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="基本准备工作"><a href="#基本准备工作" aria-hidden="true" class="header-anchor">#</a> 基本准备工作</h1> <p>介绍章节介绍了如何直接利用已完成的项目库克隆代码直接进行增量开发，本小节介绍了项目如何从零开始搭建及组件编写拼装。</p> <h2 id="_1-创建项目"><a href="#_1-创建项目" aria-hidden="true" class="header-anchor">#</a> 1.创建项目</h2> <p>在任意目录</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建项目</span>
vue create vue-admin
<span class="token comment"># OR vue ui 图形化界面启动</span>
vue ui
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>创建项目默认选择核心插件 <code>vue-router</code>、<code>vuex</code> 、<code>sass</code> ,安装完成后安装 <code>axios</code> 、<code>vuepress</code></p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">TIP</p> <p>安装插件推荐使用图形界面 <code>vue ui</code></p></div> <p>安装成功后运行</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run serve
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>运行成功后您将看到如下页面表示运行成功
<img src="/vue-admin/doc/assets/img/welcome.7eff122e.jpg" alt="An image"></p> <h2 id="_2-基本配置及目录创建"><a href="#_2-基本配置及目录创建" aria-hidden="true" class="header-anchor">#</a> 2.基本配置及目录创建</h2> <h3 id="es-lint"><a href="#es-lint" aria-hidden="true" class="header-anchor">#</a> es-lint</h3> <p>项目推荐使用es-lint语法检查工具，推荐使用webstorm打开工程因此需要配置一下es-list的检查规则</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">// 工程根目录 .eslintrc.js</span>
  <span class="token comment">// 配置主要是忽略空格</span>
  rules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
    <span class="token string">'indent'</span><span class="token punctuation">:</span> <span class="token string">'off'</span><span class="token punctuation">,</span>
    <span class="token string">'space-before-function-paren'</span><span class="token punctuation">:</span> <span class="token string">'off'</span><span class="token punctuation">,</span>
    <span class="token string">'no-unused-vars'</span><span class="token punctuation">:</span> <span class="token string">'off'</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="vue-config-js"><a href="#vue-config-js" aria-hidden="true" class="header-anchor">#</a> vue.config.js</h3> <p>由于<a href="https://cli.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">vue-cli3<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>重构了项目结构，webpack的相关配置也大大简化，具体配置可参考 <a href="https://cli.vuejs.org/zh/config/#vue-config-js" target="_blank" rel="noopener noreferrer">cli3配置<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>本项目配置根据业务情况暂时编写为如下</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 配置路径别名</span>
<span class="token keyword">var</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>

<span class="token keyword">function</span> <span class="token function">resolve</span> <span class="token punctuation">(</span><span class="token parameter">dir</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> dir<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 配置基础链接地址，根据发布环境添加</span>
  publicPath<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'production'</span>
    <span class="token operator">?</span> <span class="token string">'/vue-admin-site/'</span>
    <span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
  <span class="token comment">// dev跨域问题</span>
  <span class="token comment">// devServer: {</span>
  <span class="token comment">//   proxy: {</span>
  <span class="token comment">//     '/admin': { target: 'http://localhost:8088/cms' },</span>
  <span class="token comment">//     '/attachment_pictures': { target: 'http://localhost:8088/cms' }</span>
  <span class="token comment">//   }</span>
  <span class="token comment">// },</span>
  productionSourceMap<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  lintOnSave<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span class="token string">'production'</span><span class="token punctuation">,</span>
  assetsDir<span class="token punctuation">:</span> <span class="token string">'static'</span><span class="token punctuation">,</span>
  filenameHashing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 发布打包文件是否有哈希后缀</span>
  <span class="token function-variable function">chainWebpack</span><span class="token punctuation">:</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    config<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias
      <span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'@'</span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// key,value自行定义，比如.set('@@', resolve('src/components'))</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>具体释义请参考配置文档</p> <p>注意：配置更新需要重启服务</p> <h3 id="目录创建"><a href="#目录创建" aria-hidden="true" class="header-anchor">#</a> 目录创建</h3> <p>目录创建参考介绍篇，此处不做赘述，工程搭建好后依次添加</p> <h2 id="_3-基础工具、资源添加"><a href="#_3-基础工具、资源添加" aria-hidden="true" class="header-anchor">#</a> 3.基础工具、资源添加</h2> <p>目录创建完毕后，依次添加基础工具组件</p> <h3 id="public"><a href="#public" aria-hidden="true" class="header-anchor">#</a> public</h3> <p>静态资源，这里复制一个富文本插件，暂时使用tinymc，后期可以添加依赖编译,在index.html文件中添加引用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>&lt;%= BASE_URL %&gt;static/tinymce/tinymce.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>详细见<a href="/vue-admin/doc/guide/component.html#富文本">富文本</a> 组件解析</p> <h3 id="api"><a href="#api" aria-hidden="true" class="header-anchor">#</a> api</h3> <p>安装<code>axios</code>后，所有ajax请求将由axios进行编写，但是实际使用时需要进行一些基础配置和封装，这里添加一个api_request.js用于封装请求相关。</p> <p><a href="https://github.com/wangbin3162/vue-admin/tree/master/src/api/api_request.js" target="_blank" rel="noopener noreferrer">api_request.js源码<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>使用示例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// tableExample 示例</span>
<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'./api_request'</span>

<span class="token comment">// 初始化树节点</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">initTreeData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'https://easy-mock.com/mock/5a93b9748be1e80aa1c9293e/kingdee/table/tree'</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">'get'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 查询列表</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getListData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'https://easy-mock.com/mock/5a93b9748be1e80aa1c9293e/kingdee/table/list'</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">'get'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="assets"><a href="#assets" aria-hidden="true" class="header-anchor">#</a> assets</h3> <p>公共静态资源、图片、字体库、基础样式等，复制粘贴至assets</p> <p>字体库使用阿里<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">iconfont<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,具体使用方法参考组件解析-&gt;基本资源-&gt;图标</p> <h3 id="common"><a href="#common" aria-hidden="true" class="header-anchor">#</a> common</h3> <p>js:mixin，cache等项目相关js</p> <p>cache.js为缓存，借助<a href="https://www.npmjs.com/package/good-storage" target="_blank" rel="noopener noreferrer">good-storage<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>实现左侧菜单栏的持久化存储</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> storage <span class="token keyword">from</span> <span class="token string">'good-storage'</span>

<span class="token comment">// 左侧菜单栏打卡状态</span>
<span class="token keyword">const</span> <span class="token constant">SIDEBAR_KEY</span> <span class="token operator">=</span> <span class="token string">'__sidebarStatus__'</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getSidebarStatus</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> some <span class="token operator">=</span> storage<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token constant">SIDEBAR_KEY</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> some
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setSidebarStatus</span> <span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> some <span class="token operator">=</span> storage<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token constant">SIDEBAR_KEY</span><span class="token punctuation">,</span> status<span class="token punctuation">)</span>
  <span class="token keyword">return</span> some
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>util 文件夹内包含了三个辅助js，dom封装了dom操作的一些工具，validate则统一配置了一些常用的校验规则，这里不做多说明，utils.js则封装
了一些最常用的工具，如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * 时间格式化
 * @param time
 * @param cFormat
 * @returns {*}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">parseTime</span> <span class="token punctuation">(</span><span class="token parameter">time<span class="token punctuation">,</span> cFormat</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> format <span class="token operator">=</span> cFormat <span class="token operator">||</span> <span class="token string">'{y}-{m}-{d} {h}:{i}:{s}'</span>
  <span class="token keyword">let</span> date
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> time <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    date <span class="token operator">=</span> time
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token string">''</span> <span class="token operator">+</span> time<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">10</span><span class="token punctuation">)</span> time <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000</span>
    date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> formatObj <span class="token operator">=</span> <span class="token punctuation">{</span>
    y<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    m<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    d<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    h<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    i<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    s<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    a<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// eslint-disable-next-line</span>
  <span class="token keyword">const</span> time_str <span class="token operator">=</span> format<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/{(y|m|d|h|i|s|a)+}/g</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">result<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> value <span class="token operator">=</span> formatObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string">'一'</span><span class="token punctuation">,</span> <span class="token string">'二'</span><span class="token punctuation">,</span> <span class="token string">'三'</span><span class="token punctuation">,</span> <span class="token string">'四'</span><span class="token punctuation">,</span> <span class="token string">'五'</span><span class="token punctuation">,</span> <span class="token string">'六'</span><span class="token punctuation">,</span> <span class="token string">'日'</span><span class="token punctuation">]</span><span class="token punctuation">[</span>value <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> value <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      value <span class="token operator">=</span> <span class="token string">'0'</span> <span class="token operator">+</span> value
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> value <span class="token operator">||</span> <span class="token number">0</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token comment">// eslint-disable-next-line</span>
  <span class="token keyword">return</span> time_str
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 数组插入函数
 * @param arr 数组
 * @param val 插入值
 * @param compare 比较函数,传入,判断是否存在插入值
 * @param maxLen 最大插入个数,不传即为max
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">insertArray</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> compare<span class="token punctuation">,</span> maxLen</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>compare<span class="token punctuation">)</span>
  <span class="token comment">// 如果当前插入的值就在第一个位置则啥都不做</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 如果数组中有这条数据则删除这个</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token comment">// 插入数据</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>maxLen <span class="token operator">&amp;&amp;</span> arr<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> maxLen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">// 如果数组超出，则把最后一个给推出</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 *  删除数据
 * @param arr 数组
 * @param compare 比较函数,传入,判断是否存在插入值
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">deleteFromArray</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> compare</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>compare<span class="token punctuation">)</span>
  <span class="token comment">// 如果数组中有这条数据则删除这个</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 节流函数，延迟执行函数
 * @param func 延迟的函数类型
 * @param delay 延迟毫秒数
 * @return {Function} 返回一个执行函数
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">debounce</span> <span class="token punctuation">(</span><span class="token parameter">func<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> timer
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>timer<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">func</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 洗牌函数
 * @param arr 需要洗牌的数组
 * @return {打乱次序的新数组}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">shuffle</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">// 复制一个新数组</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> newArr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token function">getRandomInt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token comment">// 在0-当前循环的位置随机一个位置做交换</span>
    <span class="token keyword">let</span> t <span class="token operator">=</span> newArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    newArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> newArr<span class="token punctuation">[</span>j<span class="token punctuation">]</span>
    newArr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> t
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> newArr
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 在某个区间随机一个整数
 * @param min 最小值
 * @param max 最大值
 * @return {number}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getRandomInt</span> <span class="token punctuation">(</span><span class="token parameter">min<span class="token punctuation">,</span> max</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> min<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 清空回车换行符
 * @param str
 * @returns {*}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">replaceReturn</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> str <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/(↵)+|(\n)+|(\r\n)+/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 返回一个水印canvas
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getWaterMark</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> waterMarkText <span class="token operator">=</span> str <span class="token operator">||</span> <span class="token string">'Kingdee'</span>

  <span class="token keyword">var</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
  canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token number">100</span>
  ctx<span class="token punctuation">.</span>textAlign <span class="token operator">=</span> <span class="token string">'center'</span>
  ctx<span class="token punctuation">.</span>textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span>
  ctx<span class="token punctuation">.</span>globalAlpha <span class="token operator">=</span> <span class="token number">0.08</span>
  ctx<span class="token punctuation">.</span>font <span class="token operator">=</span> <span class="token string">'20px Microsoft Yahei'</span>
  ctx<span class="token punctuation">.</span><span class="token function">translate</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span>
  ctx<span class="token punctuation">.</span><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token operator">-</span>Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span>
  ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>waterMarkText<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> canvas
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br></div></div><h3 id="directive"><a href="#directive" aria-hidden="true" class="header-anchor">#</a> directive</h3> <p>全局指令，封装了按钮点击的水波纹指令，使用v-wave指令完成功能，参考组件解析 <a href="/vue-admin/doc/guide/component.html#水波纹指令">水波纹指令</a></p> <h3 id="components"><a href="#components" aria-hidden="true" class="header-anchor">#</a> components</h3> <p>封装组件，包含按钮组、图表、分割线、抽屉、label文本、整体布局、滚动、分隔区块、富文本、标题栏等。</p> <p>实现参考组件解析 <a href="/vue-admin/doc/guide/component.html#components基础组件">基础组件</a></p> <h3 id="plugin"><a href="#plugin" aria-hidden="true" class="header-anchor">#</a> plugin</h3> <p>自定义插件封装，用于引用全局指令，全局filter，全局函数等功能</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> waves <span class="token keyword">from</span> <span class="token string">'../directive/waves'</span>

<span class="token keyword">let</span> MyPlugin <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
MyPlugin<span class="token punctuation">.</span><span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Vue<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 1. 添加全局方法或属性</span>
  Vue<span class="token punctuation">.</span><span class="token function-variable function">myGlobalMethod</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 逻辑...</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 2. 添加全局资源</span>
  Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'waves'</span><span class="token punctuation">,</span> waves<span class="token punctuation">)</span><span class="token comment">// 全局注册水波纹指令</span>

  <span class="token comment">// 3. 添加实例方法</span>
  <span class="token comment">/**
   * 自定义打印功能 调试模式打印
   * @param message
   */</span>
  <span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">$cLog</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span class="token string">'production'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> MyPlugin

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="_4-准备完成"><a href="#_4-准备完成" aria-hidden="true" class="header-anchor">#</a> 4.准备完成</h2> <p>到这里准备工作算是准备完成，请注意这里的基础组件部分不是从零开始，这部分是可以完全独立于后台管理项目的基础组件。与后台管理相关的
组件如MenuBar，NavBar等统一编写至views文件目录内，以便统一进行管理</p> <p>下一章节将会从入口开始编写代码，一步一步实现并完成基础布局搭设、实现路由跳转、vuex全局状态管理，以及如何添加一个新的模块增删改查等功能</p></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2/11/2019, 5:56:38 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/vue-admin/doc/guide/" class="prev router-link-active">
          介绍
        </a></span> <span class="next"><a href="/vue-admin/doc/guide/start.html">
          二、开始实现
        </a>
        →
      </span></p></div> </div> <!----></div></div>
    <script src="/vue-admin/doc/assets/js/app.d64942cb.js" defer></script><script src="/vue-admin/doc/assets/js/6.1efa8625.js" defer></script>
  </body>
</html>
